<!Doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		#ball {margin-left:0;width:150px;height:150px;border-radius:50%;background:rgba(0,0,255,.4);}
		#ball2{margin-left:0;width:150px;height:150px;border-radius:50%;background:rgba(255,0,0,.4);}
	</style>
</head>
<body>
	<div id="ball"></div>	
	<div id="ball2"></div>	
	<input type="button" value="移动小球" id="btn">
	<script>
		var btn = document.getElementById('btn');
		var ball = document.getElementById('ball');
		var ball2 = document.getElementById('ball2');
		var foo = ballMove;
		function ballMove (id) {
			var timer;
			return function domove(){
				clearInterval(timer);
				function move(){
					var ballMarginLeft = parseFloat(window.getComputedStyle(id).marginLeft);
					if(ballMarginLeft>=500){
						clearInterval(timer);
					}else{
						var ballNewMarginLeft = ballMarginLeft + 2 ;
						id.style.marginLeft = ballNewMarginLeft + 'px';
					}
				}
				timer = setInterval(move,20);
			}
		}
	</script>
</body>
</html>





